<template>
 <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对React的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add :addComment="addComment"/>

      <List :comments="comments" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>


<script>
  import Add from './components/Add.vue'
  import List from './components/List.vue'
  export default {
    name: 'App',

    data () {
      return {
        comments: [
          {id: 1, username: 'Tom', content: '不错!'},
          {id: 3, username: 'Jack', content: '还好吧!'},
          {id: 5, username: 'Bob', content: 'so easy!'},
        ]
      }
    },

    methods: {
      addComment (comment) {
        comment.id = Date.now()
        this.comments.unshift(comment)
      },

      deleteComment (id) {
        // 得到对应的下标, 根据下标删除
        // const index = this.comments.findIndex(item => item.id===id)
        // this.comments.splice(index, 1)

        // 根据id去过滤
        this.comments = this.comments.filter(item => item.id!==id)
      }
    },

    components: {
      List,
      Add
    }
  }
</script>


<style scoped>
  
</style>